<template>
  <div id="div-1" class="py-1 bg-gray-100 mx-[10%]">
    <div class="bg-white p-4" id="sub2-content">
      <a-flex align="center" class="justify-between" id="sub2-top">
        <a-typography-title class="!m-0" :level="5" id="sub2-title">城巿数据</a-typography-title>
        <a-radio-group :value="0" name="radioGroup" id="sub2-radios">
          <a-radio :value="index" :id="`sub2-radio-${index}`" v-for="(item, index) in sub2Radio" :key="index">{{item}}</a-radio>
        </a-radio-group>
      </a-flex>
      <a-flex class="gap-2 mt-4" id="sub2-top-gdps">
        <a-typography-link :id="`sub2-top-gdp-link-${index}`" class="relative flex-1 bg-blue-300 px-2 py-4 rounded-xl" v-for="(item, index) in cityGDP" :key="index">
          <a-typography-text :id="`sub2-top-gdp-top-${index}`" class="absolute right-0 top-0 bg-yellow-700 !text-white text-sm rounded-bl-md rounded-tr-md px-1">{{"TOP" + (index + 1)}}</a-typography-text>
          <a-typography-text :id="`sub2-top-gdp-city-${index}`" class="!text-yellow-500 font-bold text-xl">{{item.city}}</a-typography-text>
          <a-flex class="mt-1" :id="`sub2-top-gdp-num-${index}`">
            <a-typography-text :id="`sub2-top-gdp-num-tip-${index}`" class="text-xs text-white bg-orange-300 rounded-md px-1">GDP</a-typography-text>
            <a-typography-text :id="`sub2-top-gdp-num-text-${index}`" class="text-xs ml-1 text-white">{{item.gdp}}</a-typography-text>
          </a-flex>
          <a-flex align="center" class="mt-1" :id="`sub2-top-gdp-link-bottom-${index}`">
            <EyeOutlined  class="text-gray-400" :id="`sub2-top-gdp-link-icon-${index}`"/>
            <a-typography-text class="ml-1 relative" :id="`sub2-top-gdp-link-person-${index}`">
              {{item.num }}
              <a-typography-text class="absolute text-red-400 text-sm" :id="`sub2-top-gdp-link-w-${index}`">W</a-typography-text>
            </a-typography-text>
          </a-flex>
        </a-typography-link>
      </a-flex>
    </div>
    <a-flex class="mt-2 gap-2" id="sub2-data">
      <a-flex :vertical="true" class="p-4 bg-white flex-1" id="sub2-data-flex1">
        <a-flex class="justify-between" id="sub2-title1">
          <a-typography-title :level="5" id="sub2-title1-att">
            省份
            <a-typography-text id="sub2-title1-top" class="bg-green-500 !text-white p-1 rounded-sm">TOP10</a-typography-text>
          </a-typography-title>
          <a-typography-text class="inline-block " id="sub2-title1-right">
            人均GDP单位：万元
          </a-typography-text>
        </a-flex>
        <a-table size="small" id="su2-table1" :columns="columns1" :data-source="dataSource1" :pagination="false">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'city'">
              <a-typography-link>
                {{ record.city }}
              </a-typography-link>
            </template>
          </template>
        </a-table>
      </a-flex>
      <a-flex :vertical="true" class="bg-white p-4 flex-1" id="sub2-data-flex2">
        <a-flex class="justify-between" id="sub2-title2">
          <a-typography-title :level="5" id="sub2-title2-att">
            市辖区
            <a-typography-text id="sub2-title2-top" class="bg-green-500 !text-white p-1 rounded-sm">TOP10</a-typography-text>
          </a-typography-title>
          <a-typography-text class="inline-block" id="sub2-title2-right">
            <a-radio-group id="sub2-title2-radio">
              <a-radio value="1" id="sub2-title2-radio1">GDP</a-radio>
              <a-radio value="2" id="sub2-title2-radio2">热度</a-radio>
            </a-radio-group>
          </a-typography-text>
        </a-flex>
        <a-table id="sub2-table2" size="small" :columns="columns2" :data-source="areaGDP" :pagination="false">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'city'">
              <a-typography-link :id="`sub2-table2-city-${record.index}`">
                {{ record.city }}
              </a-typography-link>
            </template>
          </template>
        </a-table>
      </a-flex>
      <a-flex :vertical="true" class="bg-white p-4 flex-1" id="sub2-data-flex3">
        <a-flex class="justify-between" id="sub2-title3">
          <a-typography-title :level="5" id="sub2-title3-att">
            国家
            <a-typography-text id="sub2-title3-top" class="bg-green-500 !text-white p-1 rounded-sm">TOP10</a-typography-text>
          </a-typography-title>
          <a-typography-text class="inline-block" id="sub2-title3-right">
            单位：亿美元
          </a-typography-text>
        </a-flex>
        <a-table id="sub2-table3" size="small" :columns="columns3" :data-source="dataSource3" :pagination="false">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'count'">
              <a-typography-link :id="`sub2-table3-count-${record.index}`">
                {{ record.count }}
              </a-typography-link>
            </template>
            <template v-if="column.key === 'city'">
              <a-image :src="record.city" :preview="false" :id="`sub2-table3-city-${record.index}`"></a-image>
            </template>
          </template>
        </a-table>
      </a-flex>
      <a-flex :vertical="true" class="bg-white p-4 max-w-[22%]" id="sub2-data-flex4">
        <a-flex class="justify-between" align="center" id="sub2-title4">
          <a-typography-title :level="5"  class="!m-0" id="sub2-title4-att">
            数据下载
          </a-typography-title>
          <a-typography-link id="sub2-title4-right" class="inline-block !text-gray-600 bg-gray-400 rounded-md text-sm px-2 py-1">
            更新
          </a-typography-link>
        </a-flex>
        <a-divider class="my-2" id="sub2-title4-divider"></a-divider>
        <a-typography-link :id="`sub2-datas-${index}`" v-for="(item, index) in subpage2Rights" :key="index" class="mb-2 flex items-center	">
          <a-typography-paragraph :id="`sub2-datas-before-${index}`" class="!m-0 w-2 h-2 inline-block bg-red-200 rounded-full"></a-typography-paragraph>
          <a-typography-paragraph :id="`sub2-datas-atp-${index}`" class="!m-0 !ml-1 max-w-[90%] flex">
            <a-typography-paragraph :id="`sub2-datas-content-${index}`" class="!m-0" :ellipsis="true">{{item.content}}</a-typography-paragraph>
            <a-typography-paragraph :id="`sub2-datas-time-${index}`" :ellipsis="true" class="!m-0 flex-1 text-gray-400 !mt-[2px] text-sm !ml-1">{{item.time}}</a-typography-paragraph>
          </a-typography-paragraph>
        </a-typography-link>
      </a-flex>
    </a-flex>
  </div>
</template>

<script setup>
const value = '1';
const cityGDP = [
  {city: '上海市', gdp: '53926.71', num: '18.88'},
  {city: '北京市', gdp: '49843.1', num: '15.88'},
  {city: '深圳市', gdp: '36801.87', num: '14.68'},
  {city: '重庆市', gdp: '32193.15', num: '17.23'},
  {city: '广州市', gdp: '31032.5', num: '3.09'},
  {city: '苏州市', gdp: '26700亿', num: '2.20'},
  {city: '成都市', gdp: '23511.3', num: '16.83'},
  {city: '杭州市', gdp: '21860亿', num: '2.17'},
  {city: '武汉市', gdp: '21000亿', num: '2.45'},
  {city: '南京市', gdp: '18500.81', num: '1.96'},
];
const areaGDP = [
  {city: '南海区', gdp: '4000', gdps: '1.11w', index:'1'},
  {city: '武进区', gdp: '3400', gdps: '5.48k', index:'2'},
  {city: '虎丘区', gdp: '1912', gdps: '6.01k', index:'3'},
  {city: '崇川区', gdp: '1840', gdps: '4.72k', index:'4'},
  {city: '铜山区', gdp: '1450', gdps: '3.55k', index:'5'},
  {city: '江都区', gdp: '1390', gdps: '3.37k', index:'6'},
  {city: '相城区', gdp: '1300', gdps: '2.70k', index:'7'},
  {city: '克拉玛依区', gdp: '1300', gdps: '1.41k', index:'8'},
  {city: '锡山区', gdp: '1300', gdps: '5.95k', index:'9'},
  {city: '蕉城区', gdp: '1206', gdps: '1.78k', index:'10'},
];
const columns1 = [
  {
    title: '排序',
    dataIndex: 'index',
    key: 'index',
  },
  {
    title: '地区',
    dataIndex: 'city',
    key: 'city',
  },
  {
    title: 'GDP/亿',
    dataIndex: 'gdp',
    key: 'gdp',
  },
  {
    title: '人均GDP',
    dataIndex: 'gdps',
    key: 'gdps',
  },
]

const columns2 = [
  {
    title: '排序',
    dataIndex: 'index',
    key: 'index',
  },
  {
    title: '地区',
    dataIndex: 'city',
    key: 'city',
  },
  {
    title: 'GDP/亿',
    dataIndex: 'gdp',
    key: 'gdp',
  },
  {
    title: '访问量',
    dataIndex: 'gdps',
    key: 'gdps',
  },
]

const columns3 = [
  {
    title: '排序',
    dataIndex: 'index',
    key: 'index',
  },
  {
    title: '国旗',
    dataIndex: 'city',
    key: 'city',
  },
  {
    title: '国家',
    dataIndex: 'count',
    key: 'count',
  },
  {
    title: 'GDP',
    dataIndex: 'gdp',
    key: 'gdp',
  },
]

const sub2Radio =  [
'GDP',
'GDP增长率',
'人均GDP',
'常住人口',
'税收收入',
'旅游收入',
'大学数量',
'医院数量',
'房产均价',
'城市面积',
'热度排名'
]


const dataSource1 = [
  {city: '广东省', gdp: '135673.16', gdps: '10.72w', index:'1' },
  {city: '江苏省', gdp: '128222.2', gdps: '15.06w', index:'2' },
  {city: '山东省', gdp: '92069', gdps: '9.06w', index:'3' },
  {city: '浙江省', gdp: '82553', gdps: '12.55w', index:'4' },
  {city: '四川省', gdp: '60132.9', gdps: '7.18W', index:'5' },
  {city: '河南省', gdp: '59132.39', gdps: '5.99W', index:'6' },
  {city: '湖北省', gdp: '55803.63', gdps: '9.55w', index:'7' },
  {city: '福建省', gdp: '54355.1', gdps: '12.98w', index:'8' },
  {city: '湖南省', gdp: '50012.85', gdps: '7.57w', index:'9' },
  {city: '台湾省', gdp: '49986', gdps: '21.28w', index:'10' }
]

const dataSource3 = [
  {city: 'https://picsum.photos/id/1/50/20', gdp: '269496.40', count: '美国', index:'1' },
  {city: 'https://picsum.photos/id/2/50/20', gdp: '177009', count: '中国', index:'2' },
  {city: 'https://picsum.photos/id/3/50/20', gdp: '44298.40', count: '德国', index:'3' },
  {city: 'https://picsum.photos/id/4/50/20', gdp: '42308.60', count: '日本', index:'4' },
  {city: 'https://picsum.photos/id/5/50/20', gdp: '37322.20', count: '印度', index:'5' },
  {city: 'https://picsum.photos/id/6/50/20', gdp: '33320.60', count: '英国', index:'6' },
  {city: 'https://picsum.photos/id/7/50/20', gdp: '30490.20', count: '法国', index:'7' },
  {city: 'https://picsum.photos/id/8/50/20', gdp: '21860.80', count: '意大利', index:'8' },
  {city: 'https://picsum.photos/id/9/50/20', gdp: '21268.10', count: '巴西', index:'9' },
  {city: 'https://picsum.photos/id/10/50/20', gdp: '21178.10', count: '加拿大', index:'10' }
]


const subpage2Rights = [
  {
    content: '全国城市医疗数据（2020-2023地级市及',
    time: '2024-12-17'
  },
  {
    content: '2024年中国祠堂数据库',
    time: '2024-12-17'
  },
  {
    content: '企业历史融资数据（1986.9-2024.2年',
    time: '2024-12-17'
  },
  {
    content: '药品库（更新2023年6月）',
    time: '2024-12-17'
  },
  {
    content: '全国医院库，含医院、卫生院等数据',
    time: '2024-12-07'
  },
  {
    content: '地级市电子商务交易额（2011-2022年）',
    time: '2024-12-17'
  },
  {
    content: '中国高铁航线数据库CRAD（2023年）',
    time: '2024-12-17'
  },
  {
    content: '全国民航机场旅客吞吐量、货邮吞吐量及',
    time: '2024-12-17'
  },
  {
    content: '地级市-就业人员技能、就业学历结构',
    time: '2024-12-17'
  },
  {
    content: '地级市+县域的城市极端气候研究数据',
    time: '2024-12-17'
  },
  {
    content: '各省市地方财政收入与财政支出（1998',
    time: '2024-12-17'
  },
  {
    content: '地级市八大类居民消费价格指数CPI（200',
    time: '2024-12-17'
  },
  {
    content: '上市公司制造业数据大全1990-2023年',
    time: '2024-12-17'
  },
  {
    content: '高新技术企业数据库（1990-2024年）44',
    time: '2024-12-17'
  },
]

</script>
<style></style>
